<template>
    <div class="vmenu">
        <div class="left">
            <ul>
                <li
                    class="menu-item"
                    :class="{active:item.isActive}"
                    v-for="(item,index) in list"
                    :key="index"
                    @click="menuClick(item,index)"
                >
                    <img :src="item.imgSrc">
                    <span>{{item.name}}</span>
                </li>
            </ul>
            <div class="arrow-wrap">
                <span class="el-icon-arrow-up"></span>
            </div>
        </div>
        <div class="right">
            <div class="top-title" v-if="curIndex!=null&&list[curIndex]">{{topTitle}}</div>
            <ul class="right-btn">
                <li
                    :class="{active:item.isActive}"
                    v-for="(item,index) in childList"
                    :key="index"
                    @click="childMenuClick(item,index)"
                >{{item.name}}</li>
            </ul>
        </div>
    </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
    data() {
        return {
            curIndex: null,
            curChildIndex: null,
            list: [
                {
                    name: "系统首页",
                    url: "",
                    isActive: false
                },
                {
                    name: "组织管理",
                    url: "",
                    children: [
                        {
                            name: "党组织管理",
                            url: "Dzzgl",
                            isActive: false
                        }
                    ]
                },
                {
                    name: "党建宣传",
                    url: "",
                    isActive: false
                },
                {
                    name: "工作新闻",
                    url: "",
                    isActive: false
                },
                {
                    name: "党务工作",
                    url: "",
                    isActive: false
                },
                {
                    name: "党员发展",
                    url: "",
                    isActive: false
                },
                {
                    name: "组织生活",
                    url: "",
                    isActive: false
                },
                {
                    name: "党费缴纳",
                    url: "",
                    isActive: false
                },
                {
                    name: "学习教育",
                    url: "",
                    isActive: false
                },
                {
                    name: "任务管理",
                    url: "",
                    isActive: false
                },
                {
                    name: "服务管理",
                    url: "",
                    isActive: false
                }
            ],
            childList: []
        };
    },
    computed: {
        topTitle() {
            if (this.curIndex != null && this.list[this.curIndex]) {
                return this.list[this.curIndex].name;
            }
            return "";
        }
    },
    mounted() {
        this.list = this.list.map(item => {
            return {
                imgSrc: `../static/images/${item.name}.png`,
                ...item
            };
        });
    },
    methods: {
        // ...mapMutations(["setCurrentMenu"]),
        menuClick(item, index) {
            this.curIndex = index;
            // 重置状态
            this.resetState();
            item.isActive = true;
            if (this.list[this.curIndex].children) {
                this.childList = this.list[this.curIndex].children;
            } else {
                this.childList = [];
            }
        },
        childMenuClick(item, index) {
            // item.name="text"
            this.curChildIndex = index;
            // 将子菜单其它的变成未激活
            if (
                this.curIndex != null &&
                this.list[this.curIndex] &&
                this.list[this.curIndex].children
            ) {
                this.list[this.curIndex].children.forEach(_item => {
                    _item.isActive = false;
                });
            }
            item.isActive = true;
            // 跳转路由
            this.$router.push({ name: item.url });
            // this.setCurrentMenu(item);
        },
        resetState() {
            this.list.forEach(item => {
                item.isActive = false;
                if (item.children) {
                    item.children.forEach(_item => {
                        _item.isActive = false;
                    });
                }
            });
        }
    }
};
</script>
<style lang="scss">
.vmenu {
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
    width: 320px;

    .left {
        height: calc(100% - 80px);
        width: 80px;
        background-color: #b71b04;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        & > ul {
            height: 100%;
        }
        .arrow-wrap {
            background-color: #a41700;
            position: absolute;
            width: 80px;
            height: 28px;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 0);
            span {
                // background: url("../../static/images/arrow.png") no-repeat
                //     center center;
                width: 22px;
                height: 12px;
                color: #c7c7c7;
                font-size: 25px;
                &:hover {
                    color: #fff;
                }
            }
        }
        .menu-item {
            display: flex;
            flex-direction: column;
            height: 86px;
            cursor: pointer;
            img {
                margin: 5px auto;
                width: 32px;
                height: 32px;
                margin-bottom: 10px;
            }
            span {
                color: #c7c7c7;
            }
            &.active span {
                color: #fff;
            }
        }
    }
    .right {
        flex: 1;
        background-color: #921503;
        display: flex;
        flex-direction: column;
        .top-title {
            color: #c7c7c7;
            border-bottom: 1px solid #9d2d1a;
            padding: 20px 0;
            text-align: center;
            font-size: 16px;
        }
        ul {
            margin-top: 30px;
            li {
                height: 50px;
                line-height: 50px;
                color: #c7c7c7;
                cursor: pointer;
                &.active {
                    color: #fff;
                    background: #831300;
                    position: relative;
                    &:before {
                        position: absolute;
                        right: -3px;
                        height: 100%;
                        content: "";
                        width: 6px;
                        background: #ffad19;
                    }
                }
            }
        }
    }
}
</style>